/**
 * @author Wuner
 * @date 2020/8/2 18:19
 * @description
 */
 import { init } from 'snabbdom/build/package/init';
 import { h } from 'snabbdom/build/package/h';
 
 import { classModule } from 'snabbdom/build/package/modules/class'
 import { propsModule } from 'snabbdom/build/package/modules/props.js'
 import { styleModule } from 'snabbdom/build/package/modules/style.js'
 import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners.js'

 import rs from './movies.json';

 let patch = init([classModule, propsModule, styleModule, eventListenersModule]);
 
 let next = 11;
 let movieList = [];
 let vnode = null;
 // 当前选中的排序类型
 let sortBy = "rank";
 let totalHeight = 0;

 rs.data.forEach((i, idx) => {
    movieList.push(i)
 })

 /**
  * 处理排序
  * @param {*} type 传入的数据类型
  */
 function changeSort(type) {
  sortBy = type;
  movieList.sort((a, b) => {
    if (a[type] > b[type]) {
      return 1;
    }
    if (a[type] < b[type]) {
      return -1;
    }
    return 0;
  });
  render();
 }
 
 function add() {
  const n = movieList[Math.floor(Math.random() * 10)];
  movieList = [
    { rank: next++, title: n.title, desc: n.desc },
  ].concat(movieList);

  render();
 }
 
 function remove(index) {
   movieList.splice(index, 1);
   render();
 }
 
 const movieView = (movieList, index) => {
   let className = movieList.className ? movieList.className : '';
   return h(
     `div.li${className}`,
     {
       key: movieList.rank,
       style: {
         padding: '0 16px',
         height: '50px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         background: '#fff',
         boxShadow: '0 0 1px rgba(0, 0, 0, 0.2)',
         opacity: '0',
         delayed: { transition: 'opacity 4s', opacity: '1' },
         remove: { transition: 'opacity 1s', opacity: '0' },
       },
     },
     [
       h('span', movieList.rank),
       h('span', movieList.title),
       h('span', movieList.description),
       h(
         'div.btn.del-btn',
         {
           on: {
             click: [remove, index],
           },
         },
         '×',
       ),
     ],
   );
 };

 function view(data) {
  return h("div", [
    h("h1", "Top 10 movies"),
    h("div", [
      h("a.btn.add", { on: { click: add } }, "Add"),
      "Sort by: ",
      h("span.btn-group", [
        h(
          "a.btn.rank",
          {
            class: { active: sortBy === "rank" },
            on: {
              click: () => {
                changeSort("rank");
              },
            },
          },
          "Rank"
        ),
        h(
          "a.btn.title",
          {
            class: { active: sortBy === "title" },
            on: {
              click: () => {
                changeSort("title");
              },
            },
          },
          "Title"
        ),
        h(
          "a.btn.desc",
          {
            class: { active: sortBy === "desc" },
            on: {
              click: () => {
                changeSort("desc");
              },
            },
          },
          "Description"
        ),
      ]),
    ]),
    h(
      "div.list",
      { style: { height: totalHeight + "px" } },
      data.map(movieView)
    ),
  ]);
}

function render() {
  vnode = patch(vnode, view(movieList)); 
}

window.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector('#app');
  vnode = patch(container, view(movieList));
  render();
});
 